<template>
  <div class="map">
    <div id="mapBox" class="map-box" style="width: 100%;"></div>
    <div class="map-tool">
      <el-button type="primary" plain size="mini" :disabled="this.$data.createBtn" @click="handleCreateBthClick">新建</el-button>
      <el-button type="success" plain size="mini" :disabled="this.$data.Update" @click="handleUpdateBthClick">编辑</el-button>
      <el-button type="warning" plain size="mini" :disabled="this.$data.Clear" @click="handleClearBthClick">清除</el-button>
      <el-button type="danger" plain size="mini" :disabled="this.$data.Close" @click="handleCloseBthClick">结束</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "DrawArea",
  props:{
    polygonPath:{
      type:String,
      default:''
    },
    polygonStyle:{
      type:Object,
      default:()=>{
        return{
          fillColor:'#26EB23',
          fillOpacity:0.9,
          strokeColor:'#00D3FC',
          strokeOpacity:0.9,
          strokeWeight:2
        }
      }
    }
  },
  data() {
    return {
      map: null,
      polygon:null,
      // 状态码
      edit: false,
      createBtn: false,
      Clear: false,
      Close: false,
      Update: false
    };
  },
  watch:{
    polygonStyle:{
      handler:function() {
        if(this.polygon){
          this.resetPolygonStyle();
        }
      },
      deep:true
    }
  },
  async mounted() {
    console.log(123,this)
    await this.initMap();
    this.initPolygonEditor();
  },
  methods: {
    // 初始化map
    initMap() {
        this.map = new T.Map("mapBox");
        this.map.centerAndZoom(new T.LngLat(109.467, 22.912), 16);
        this.map.addControl(new T.Control.Zoom);
        this.map.setMapType(window.TMAP_HYBRID_MAP);
        this.map.disableDoubleClickZoom()
        this.polygonTool = new T.PolygonTool(this.map, {
            color: this.polygonStyle.strokeColor,
            weight: this.polygonStyle.strokeWeight,
            opacity: this.polygonStyle.strokeOpacity,
            fillColor: this.polygonStyle.fillColor,
            fillOpacity: this.polygonStyle.fillOpacity,
        })
    },
    /** init polygonEditor
     * isData：determine whether to render with value
    */
    initPolygonEditor(isData = true) {
        if (this.polygonPath && isData) {
            let path = this.polygonPath.split('|').map(item => item.split(','))
            let TPath = [];
            path.forEach(item => {
                TPath.push(new T.LngLat(parseFloat(item[0]).toFixed(6),parseFloat(item[1]).toFixed(6)))
            })
            this.polygon = new T.Polygon(TPath,{
                color: this.polygonStyle.strokeColor,
                weight: this.polygonStyle.strokeWeight,
                opacity: this.polygonStyle.strokeOpacity,
                fillColor: this.polygonStyle.fillColor,
                fillOpacity: this.polygonStyle.fillOpacity,
                lineStyle: "solid"
            });
            this.map.addOverLay(this.polygon)
            this.polygonTool = new T.PolygonTool(this.map, {
                color: this.polygonStyle.strokeColor,
                weight: this.polygonStyle.strokeWeight,
                opacity: this.polygonStyle.strokeOpacity,
                fillColor: this.polygonStyle.fillColor,
                fillOpacity: this.polygonStyle.fillOpacity,
                lineStyle: "solid"
            });
        }
        // 修改新增按钮默认状态
        this.$data.createBtn = !!this.polygon
    },
      // 画完框最后执行的结束方法
      drawFinish(e) {
          if (e !== undefined){
              this.polygon = e.allPolygons[e.allPolygons.length-1]
          }
          // 修改状态码
          this.$data.createBtn = true
          this.$data.Update = false
          this.$data.Close = false;
          let path = this.convertArray(this.polygon.getLngLats())
          console.log("顶点坐标列表 ----------> ", path)
          this.$emit('change-path', path);
      },
      // 坐标 -> 数组
      convertArray(LngLats){
          var returnData = []
          LngLats[0].forEach(item => {
              let returnArray = []
              returnArray.push(item.getLng())
              returnArray.push(item.getLat())
              returnData.push(returnArray)
          })
          return returnData
    },
      // 新增按钮方法
      handleCreateBthClick() {
          // 修改状态码
          this.$data.Close = false;
          this.polygonTool.setTips("双击或按钮结束")
          this.polygonTool.open()
          this.polygonTool.addEventListener('draw',this.drawFinish)
      },
      // 修改按钮方法
      handleUpdateBthClick() {
          if (this.$data.edit === false){
              this.map.removeOverLay(this.polygon)
              this.polygon.enableEdit()
              this.map.addOverLay(this.polygon)
              this.$data.edit = true
          }else {
              this.map.removeOverLay(this.polygon)
              this.polygon.disableEdit()
              this.map.addOverLay(this.polygon)
              this.$data.edit = false
          }
          // 修改状态码
          this.$data.Close = false
      },
      // 结束按钮方法
      handleCloseBthClick() {
          console.log(this.polygonTool)
          // 判断是修改还是新增,两个不同的处理方式
          this.polygonTool.endDraw();
          this.drawFinish()
          this.map.removeOverLay(this.polygon)
          this.polygon.disableEdit()
          this.$data.edit = false
          this.map.addOverLay(this.polygon)
      },
      // 清除按钮方法
      handleClearBthClick() {
          this.map.removeOverLay(this.polygon)
          if (Object.keys(this.polygonTool).length === 0){
              this.polygonTool.clear();
          }
          // 修改状态码
          this.$data.createBtn = false
          this.$data.Close = true
          this.$data.Update = true
      },
    // 重设polygon样式
    resetPolygonStyle(){
      const {polygon,polygonStyle:{fillColor,fillOpacity,strokeColor,strokeOpacity,strokeWeight}} = this
      polygon._opts.fillColor = fillColor;
      polygon._opts.fillOpacity = fillOpacity;
      polygon._opts.strokeColor = strokeColor;
      polygon._opts.strokeOpacity = strokeOpacity;
      polygon._opts.strokeWeight = strokeWeight;
    },
  }
};
</script>
<style lang="scss" scoped>
  .map{
    width:100%;
    height: 500px;
    display: flex;
    flex-direction: column;
    position: relative;
    // overflow: hidden;
  }
  .map-box{
    flex:auto;
  }
  .map-tool{
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 10px;
    bottom: 10px;
    background-color: #fff;
    padding:10px;
    border-radius: 5px;
    z-index: 9999;
  }
  ::v-deep .el-button+.el-button{
    margin:0;
  }
  ::v-deep .el-button+.el-button:nth-child(2){
    margin:5px 0;
  }
  ::v-deep .el-button+.el-button:nth-child(3){
    margin-bottom:5px;
  }
</style>
